<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>绑定样式</title>
        <style>
            [v-cloak] { display: none; }
            .wrapper {
                width: 80%;
                border: 1px solid gray;
                margin: auto;
            }
            .wrapper>.title {
                margin: 10px 0;
                background: #f0f0f0;
            }
            .wrapper>div {
                margin: 10px;
            }
        </style>
    </head>
    <div>

        <h3>绑定样式</h3>
        <p>用元素的 style 属性绑定样式</p>

        <!--在 #first 元素内部书写根组件的模板(template)-->
        <div id="first" v-cloak>
            <div class="wrapper">
                <p class="title">绑定对象: `v-bind:style="对象"`</p>
                <div v-bind:style="{ border: '1px solid blue', backgroundColor: '#ff7033' }">
                    {{datetime}}
                </div>
                <div :style="first">{{datetime}}</div>
                <p class="title">绑定数组: `v-bind:style="数组"`</p>
                <div :style="[first, { color: 'blue' }]">{{datetime}}</div>
                <div :style="[ actived ? first : '', { color: 'blue' }]" @mouseover="change" @mouseout="recover">
                    {{datetime}}
                </div>
            </div>
        </div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>
            const options = {
                data() {
                    return {
                        // 数据属性
                        datetime: new Date().toISOString(),
                        first: {
                            border: '1px solid green',
                            backgroundColor: '#ff7033',
                            textAlign: 'center',
                            fontSize: '2rem'
                        },
                        actived: false
                    }
                },
                methods: {
                    change() {
                        this.actived = true;
                    },
                    recover() {
                        this.actived = false;
                    }
                }
            }

            Vue.createApp(options).mount( '#first' );
        </script>
    </div>
</html>